基本设置

fastpages 会将存放在 _notebooks 中的 jupyter notebook 自动转换成博文，因此你应该将所有的 jupyter notebook 放在该文件夹下。

fastpages 会将存放在 _post 文件夹内的 markdown 文章和 _word 中的 word 文章自动转换成博文。因此你的博文应该存放在这三个文件夹内。

所有的博文遵循同一套命名规范，即 YYYY-MM-DD-filename.ext，如本篇 notebook 教程的文件名为 2020-04-04-jupyter-tutorial.ipynb

FrontMatter

FrontMatter 位于每篇 notebook 中的第一个 cell 中，其作用是每篇博文的配置文件，它控制着每篇博文该如何展现内容。

markdown
# Title
> Awesome summary

- toc:true- branch: master
- badges: true
- comments: true
- author: Hamel Husain & Jeremy Howard
- categories: [fastpages, jupyter]

有关 FrontMatter 的详细配置和说明可以参考 fastpages 说明

格式

本文仅介绍 fapages 中的一些亮点功能，关于 jupyter notebook 的使用请自行寻找相关教程

在 cell 开头如果加上 #hide ，fastpages 会隐藏该 cell 的输入和输出

在 cell 开头如果加上 #hide_input ，fastpages 会隐藏该 cell 的输入

The comment #hide_input was used to hide the code that produced this.

在 cell 开头如果加上 #collapse-hide ，fastpages会默认折叠该细胞，但可以手动展开

在 cell 开头如果加上 #collapse-show ，fastpages会默认展开该细胞，但可以手动折叠

#collapse-hide
import pandas as pd
import plotly.express as px
from IPython.display import HTML

#collapse-show
cars = 'https://vega.github.io/vega-datasets/data/cars.json'
movies = 'https://vega.github.io/vega-datasets/data/movies.json'
sp500 = 'https://vega.github.io/vega-datasets/data/sp500.csv'
stocks = 'https://vega.github.io/vega-datasets/data/stocks.csv'
flights = 'https://vega.github.io/vega-datasets/data/flights-5k.json'

可视化显示

在 fastpages 官网中介绍了如何用 Altair 显示可交互图表的操作，其实不只 Altair， fastapages 支持多种可视化框架。需要注意的是，在最后显示阶段需要用 HTML(fig.to_html()) 代替平常 fig.show()

plotly

print(px.data.iris.__doc__)
px.data.iris().head()

Each row represents a flower.

https://en.wikipedia.org/wiki/Iris_flower_data_set

Returns:
    A `pandas.DataFrame` with 150 rows and the following columns:
    `['sepal_length', 'sepal_width', 'petal_length', 'petal_width', 'species', 'species_id']`.

df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length", color="species", marginal_y="rug", marginal_x="histogram")
HTML(fig.to_html())

df = px.data.gapminder()
fig = px.scatter(df, x="gdpPercap", y="lifeExp", animation_frame="year", animation_group="country",
           size="pop", color="continent", hover_name="country", facet_col="continent",
           log_x=True, size_max=45, range_x=[100,100000], range_y=[25,90])
HTML(fig.to_html())

df = px.data.election()
fig = px.line_3d(df, x="Joly", y="Coderre", z="Bergeron", color="winner", line_dash="winner")
HTML(fig.to_html())

图片

可以用类似 markdown 格式载入本地或远程图片

![](my_icons/fastai_logo.png)

![](https://image.flaticon.com/icons/svg/36/36686.svg)

GIF 图像

![](https://upload.wikimedia.org/wikipedia/commons/7/71/ChessPawnSpecialMoves.gif)

图注

采用以下格式显示图注

![](https://www.fast.ai/images/fastai_paper/show_batch.png "Credit: https://www.fast.ai/2020/02/13/fastai-A-Layered-API-for-Deep-Learning/")

其它亮点

Tweet 卡片

输入 > twitter: https://twitter.com/jakevdp/status/1204765621767901185?s=20 显示如下信息

Altair 4.0 is released! https://t.co/PCyrIOTcvv
Try it with:

pip install -U altair

The full list of changes is at https://t.co/roXmzcsT58 ...read on for some highlights. pic.twitter.com/vWJ0ZveKbZ
— Jake VanderPlas (@jakevdp) December 11, 2019

Youtube 视频

输入 > youtube: https://youtu.be/XfoYk_Z5AkI 显示如下信息

Callouts

输入 > Warning: There will be no second warning! 显示如下信息

Warning: There will be no second warning!

输入 > Important: Pay attention! It's important. 显示如下信息

Important: Pay attention! It’s important.

输入 > Tip: This is my tip. 显示如下信息

Tip: This is my tip.

输入 > Note: Take note of this. 显示如下信息

Note: Take note of this.

脚注

jupyter notebook 中脚注与 markdown 中的脚注有所区别，详细参见这篇文章 This guide provides more detail about this syntax

For example, here is a footnote {% fn 1 %}.
And another {% fn 2 %}
{{ 'This is the footnote.' | fndetail: 1 }}
{{ 'This is the other footnote. You can even have a [link](www.github.com)!' | fndetail: 2 }}

For example, here is a footnote ¹.

And another ²

1. This is the footnote.↩

2. This is the other footnote. You can even have a link!↩